<template>
  <div id="myDialog" :class="{visible:isShow}">
      <div class = "offset" >
    <div class="myDialog1 modal-win" :style="{width:width,height:height,}" >
      <div :class="{myDialog2}" @click="close()"></div>
      <div class = "add-title">
            <img :src = "imgsrc">
            <span class = "add-text">{{title}}</span>
            <span class = "add-text">{{infolist}}</span>
      </div>
        <slot></slot>
    </div>
  </div>
  </div>  
</template>
<script>
export default {
    name: "MyDialog",
    data() {
        return {
            // pop:require("@/assets/tanchu/pop.png"),
        };
    },
    computed: {
        isShow() {
            return !this.visible;
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String
        },
        height:{
            type:String
        },
       myDialog2:{
           type:Boolean,
           default:true,
       },
      title:{
            type:String,
            default:'ss',
      },
      infolist:{
          type:Object,
      },
      time:{
          type:String,         
      },
      imgsrc:{
         type:String,
         default:require("../../assets/imgs/operation_bg_biaoti_default.png"),
      },
    },
    methods: {
        close() {
            this.visible = false;
            this.$emit("changeVisible");
        }
    }
};
</script>
<style scoped>
.visible {
    display: none;
}
.offset{
    position: absolute;
    top:10%;
    left:0px;
    bottom:0px;
    right:0px;
    vertical-align: middle;
    
}

#myDialog {
    /* background: rgba(0, 0, 0, 0.7); */
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}
.modal-win{
    border-top: 8px solid #009688;
  }
  .add-text{
    color: #2da89c;
    font-weight: bold;
    font-size: 18px;
  }
  .add-title{
    padding-left: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
  }
.myDialog1 {
    margin-top: 100px ;
    background: #fff;
    /* position: relative; */
    min-height: 100px;
    border-radius: 10px;
    /* overflow: auto; */
    /* max-height: 90%; */
    height:446px;
}
.myDialog2 {
    z-index: 999;
    position: absolute;
    right: -105px;
     top: 10px;
     color: #555;
      height:50px;
      width:160px;
     /* background:url("../../assets/spacity/1/pop.png") no-repeat;     */
}
.myDialog2::before {
      content: "X";
      display: inline-block;
      font-size:30px;
    /* background:url("../../assets/spacity/1/pop.png") no-repeat;
    display: inline-block; */
    /* background:url("../../assets/spacity/1/pop.png") no-repeat;   */
}
.myDialog3{
    z-index: 999;
    position: absolute;
    right: 138px;
    top: -87px;
    color: #555;
    height: 240px;
    width: 300px;
    /* background: url("../../assets/spacity/ky/3/look_bg_tijiao_default.png"); */

}
.myDialog4{
    z-index: 999;
    position: absolute;
    right: 30px;
    top: -50px;
    color: #555;
    height: 240px;
    width: 300px;
    /* background:url("../../assets/spacity/1/pop.png") no-repeat;    */
}
.sorce{
    z-index: 999;
    position: absolute;
    left:-100px;

  /*color: #555; */
    width:100%;
    height:100%;
    /* background:url("../../assets/tanchu/pop.png") no-repeat;    */
}
</style>



 